<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <style>
      table {
        margin: auto;
        width: 80%;
        border-collapse: collapse;
        margin-bottom: 20px;
      }
      table,
      th,
      td {
        border: 1px solid #4d3535;
      }
      th,
      td {
        padding: 10px;
        text-align: center;
      }
      th {
        background-color: #fbcecc;
        font-weight: bold;
      }
      tr:nth-child(even) {
        background-color: #fdf2f2;
      }
      tr:nth-child(odd) {
        background-color: #eddddd;
      }
      tr:hover {
        background-color: rgb(255, 255, 255);
        cursor: pointer;
      }

      .centered {
        text-align: center;
      }

      .centered button,
      #backBtn {
        background-color: #745353;
        color: #f2f2f2;
        width: 80px;
        height: 30px;
        border: none;
      }

      .centered button:hover {
        background-color: #dba6a5;
        color: #4d3535;
      }
      .quantity-input {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 80px;
        margin: 0 auto;
      }
      .quantity-input button {
        padding: 5px 10px;
        cursor: pointer;
        border: none;
        background-color: #6e5050;
        color: #f2f2f2;
      }

      .quantity-input button:hover {
        background-color: #ffb6b3;
        color: #4d3535;
      }
      .quantity-input input {
        width: 30px;
        text-align: center;
        border: 1px solid #ccc;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <!-- 表格部分 -->
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" id="checkAll" /></th>
          <th>编号</th>
          <th>名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" / class="cks"></td>
          <td>001</td>
          <td>商品A</td>
          <td>10.00</td>
          <td>
            <div class="quantity-input">
              <button class="quantity-btn" onclick="decrease(this)">-</button>
              <input type="text" class="quantity" value="2" />
              <button class="quantity-btn" onclick="add(this)">+</button>
            </div>
          </td>
          <td class="price">20.00</td>
          <td class="centered"><button>删除</button></td>
        </tr>
        <tr>
          <td><input type="checkbox" / class="cks"></td>
          <td>002</td>
          <td>商品B</td>
          <td>15.50</td>
          <td>
            <div class="quantity-input">
              <button class="quantity-btn" onclick="decrease(this)">-</button>
              <input type="text" class="quantity" value="1" />
              <button class="quantity-btn" onclick="add(this)">+</button>
            </div>
          </td>
          <td class="price">15.50</td>
          <td class="centered"><button>删除</button></td>
        </tr>
        <tr>
          <td><input type="checkbox" / class="cks"></td>
          <td>003</td>
          <td>商品C</td>
          <td>20.00</td>
          <td>
            <div class="quantity-input">
              <button class="quantity-btn" onclick="decrease(this)">-</button>
              <input type="text" class="quantity" value="3" />
              <button class="quantity-btn" onclick="add(this)">+</button>
            </div>
          </td>
          <td class="price">60.00</td>
          <td class="centered"><button>删除</button></td>
        </tr>
        <tr>
          <td>总价</td>
          <td id="allPrice"></td>
          <td></td>

          <td></td>
          <td></td>
          <td></td>
          <td><button id="backBtn">反选</button></td>
        </tr>
      </tbody>
    </table>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
      $(document).ready(function () {
        // 点击增加
        function add(num) {
          var $input = $(num).prev("input");
          $input.val(parseInt($input.val()) + 1);
        }

        // 点击减少
        function decrease(num) {
          var $input = $(num).next("input");
          if ($input.val() > 1) {
            $input.val(parseInt($input.val()) - 1);
          }
        }

        // 全选与反选
        $("#checkAll").on("click", function () {
          var isChecked = $(this).is(":checked");
          $(".cks").prop("checked", isChecked);
        });

        $(".cks").on("click", function () {
          var allChecked = $(".cks").length === $(".cks:checked").length;
          $("#checkAll").prop("checked", allChecked);
        });

        $("#backBtn").on("click", function () {
          $(".cks").each(function () {
            $(this).prop("checked", !$(this).is(":checked"));
          });
          var allChecked = $(".cks").length === $(".cks:checked").length;
          $("#checkAll").prop("checked", allChecked);
        });

        // 计算总价
        function allPriceUp() {
          var totalPrice = 0;
          $(".price").each(function () {
            totalPrice += parseFloat($(this).text());
          });
          $("#allPrice").text(totalPrice.toFixed(2));
        }

        // 输入框输入数值函数
        function inputUp() {
          $(".quantity").on("blur", function () {
            var price = parseFloat($(this).closest("tr").find(".price").text());
            var count = $(this).val();
            $(this)
              .closest("tr")
              .find(".rowPrice")
              .text((price * count).toFixed(2));
            allPriceUp();
          });
        }

        // 初始化总计
        allPriceUp();

        // 点击更新总价
        $(".quantity-input").on("click", function () {
          var $this = $(this);
          var price = parseFloat($this.siblings(".price").text());
          var count = $this.find("input").val();
          $this
            .closest("tr")
            .find(".rowPrice")
            .text((price * count).toFixed(2));
          allPriceUp();
        });

        // 删除行
        $(".centered>button").on("click", function () {
          if (confirm("确定删除吗？")) {
            $(this).closest("tr").remove();
            inputUp();
            allPriceUp();
          }
        });

        // 初始化输入框函数
        inputUp();
      });
    </script>
  </body>
</html>
